<template>
    <div class="search">
        <div class="logo">
            <img src="@/assets/picture/HomeView/logo.png" alt="" width="100px">
        </div>
        <div class="search-warp">
            <div class="search-bd">
                <el-input
                v-model="searchinput"
                style="width: 400px"
                placeholder="搜索宝贝"
                :prefix-icon="Search"
                />
            </div>
            <div class="search-ft">
                <a href="#">论坛</a>
                <a href="#">万卷起发</a>
                <a href="#">货架</a>
                <a href="#">手机</a>
                <a href="#">vivo</a>
                <a href="#">空调</a>
                <a href="#">笔记本电脑</a>
                <a href="#">女装</a>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { Search } from '@element-plus/icons-vue'
    const searchinput = ref('')
</script>

<style scoped>
    a{
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    a:hover{
        color:#f22e00;
    }
    .search{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }
    .logo{
        margin: 10px 30px;
    }
    .search-warp{
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .search-ft{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap:7px;
    }
</style>